<template>
    <div>
        <h2>customRef的使用</h2>
        <input type="text" v-model="keyword">
        <p>{{keyword}}</p>
    </div>
</template>
<script lang="ts">
import { customRef, defineComponent, ref } from 'vue'
// 自定义hook防抖函数
function useDebounceRef<T>(value:T, delay=200) {
    // 准备一个存储定时器的id变量
    let timerId:number;
    return customRef((track, trigger) => {
        return {
            // 返回数据的
            get() {
                // 告诉vue追踪数据
                track()
                return value
            },
            // 设置数据的
            set(nVal:T) {
                // 清理定时器
                clearTimeout(timerId)
                // 开启定时器
                timerId = setTimeout(() => {
                    value = nVal
                    // 告诉vue更新界面
                    trigger()
                }, delay)
            }
        }
    })
}
export default defineComponent({
    name: 'App',
    setup() {
        // const keyword = ref('abc')
        const keyword = useDebounceRef('abc')
        return {
            keyword,
        }
    },
})
</script>
<style>
</style>